<template>
  <Submenu :name="parent.name">
    <template slot="title">
      <Icon :type="parent.icon" :size="23" />
      {{parent.title}}
    </template>
    <template v-for="item in parent.children">
      <SiderSubmenu
        v-if="item.children"
        :key="`menu_${item.name}`"
        :name="item.name"
        :parent="item"
      >
      </SiderSubmenu>
      <MenuItem v-else :key="`menu_${item.name}`" :name="item.name">
        <Icon :type="item.icon" :size="23" />
        {{item.title}}
      </MenuItem>
    </template>
  </Submenu>
</template>

<script>
export default {
  name: 'SiderSubmenu',
  props:{
    parent:{
      type: Object,
      default: () => ({})
    }
  }
}
</script>
